<ion-header>
  <ion-navbar>
    <ion-title>Card with Images</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-card *ngFor="let card of cards">
    <img [src]="card.imageUrl" (click)="cardTapped(card)" />
    <ion-card-content>
      <h2 class="card-title">
        {{card.title}}
      </h2>
      <p>
        {{card.description}}
      </p>
    </ion-card-content>
    <ion-row no-padding>
      <ion-col>
        <button ion-button clear small color="danger" icon-left (click)="favorite(card)">
          <ion-icon name='star'></ion-icon>
          Favorite
        </button>
      </ion-col>
      <ion-col text-center>
        <button ion-button clear small color="danger" icon-left (click)="listen(card)">
          <ion-icon name='musical-notes'></ion-icon>
          Listen
        </button>
      </ion-col>
      <ion-col text-right>
        <button ion-button clear small color="danger" icon-left (click)="share(card)">
          <ion-icon name='share-alt'></ion-icon>
          Share
        </button>
      </ion-col>
    </ion-row>
  </ion-card>
</ion-content>

